<!-- 合伙人意向管理 -->
<template>
  <div class>
    <el-form :inline="true" :model="searchForm" ref="searchForm" size="mini">
      <el-form-item prop="cityId" label="城市：">
        <el-select v-model.trim="searchForm.cityId" :filterable="true" placeholder="请选择成交状态">
          <el-option label="全部" value></el-option>
          <el-option
            v-for="(item,index) in citysOptions"
            :key="index"
            :label="item.city"
            :value="item.cityId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="phone" label="手机号：">
        <el-input v-model="searchForm.phone" placeholder="请输入楼盘名称"></el-input>
      </el-form-item>
      <el-form-item prop="name" label="姓名：">
        <el-input v-model="searchForm.name" placeholder="请输入客户姓名/id/手机号"></el-input>
      </el-form-item>
      <el-form-item label="提交时间：">
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="searchList(1)" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="()=>{time=[];$refs.searchForm.resetFields()}">重置</el-button>
      </el-form-item>
    </el-form>
    <table-list
      :tableData="tableData"
      :tableInfos="tableInfos"
      :tableFormatter="tableFormatter"
      :hasSera="true"
    ></table-list>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top:30px"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="totalSize"
    ></el-pagination>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import tableList from "@/components/common/tableList";
import utils from "@/common/utils";
export default {
  name: "partnerIntentionManage",
  title: "合伙人意向管理",
  components: {
    "table-list": tableList
  },
  data() {
    return {
      searchForm: {
        cityId: "",
        name: "",
        phone: "",
        beginTime: "",
        endTime: ""
      },
      time: [],
      citysOptions: [],
      tableInfos: [
        { label: "城市", prop: "cityName" },
        { label: "姓名", prop: "name" },
        { label: "手机号", prop: "phone" },
        { label: "公司", prop: "companyName" },
        { label: "团队人数", prop: "teamSize", type: "num" },
        { label: "过往合作项目数", prop: "coopProjectNum", type: "num" },
        { label: "年度业绩(万)", prop: "yearRevenue", type: "money" },
        { label: "来源", prop: "source" },
        { label: "提交时间", prop: "createTime", type: "time" }
      ],
      tableData: [],
      pageNum: 1,
      pageSize: 10, //每页几条
      totalSize: 0
    };
  },
  watch: {
    time(value) {
      value = value ? value : [];
      let [beginTime = "", endTime = ""] = value;
      this.searchForm.beginTime = utils.getTimeString(beginTime).slice(0, 10);
      this.searchForm.endTime = utils.getTimeString(endTime).slice(0, 10);
    }
  },
  methods: {
    //获取市
    loadCity() {
      this.$axios.post(`/city/cityList`).then(res => {
        this.citysOptions = res.cityList;
      });
    },
    searchList(pageNum) {
      //return;
      this.pageNum = pageNum || this.pageNum;
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchForm
      };
      this.$axios.post("/cms/api/official/query", param).then(res => {
        this.tableData = res.data;
        this.totalSize = res.total;
      });
    },
    //表格格式化方法。prop对应array下标
    tableFormatter(prop, val) {
      if (prop == "source") {
        let sourceMap = {
          1: "官网"
        };
        return sourceMap[val];
      }
      return val;
    },
    handleCurrentChange() {
      this.searchList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchList(1);
    }
  },
  created() {
    this.loadCity();
    this.searchList(1);
  },
  activated() {
    this.searchList();
  },
  destroyed() {},
  filters: {}
};
</script>

<style lang="stylus" scoped></style>
